<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script>
<div id="root">
	<input type="text" v-model='parentMsg'><br>
	<child v-bind:my-message='parentMsg'></child>
</div>
<script>
	/**
	 * 单向数据流
	 * prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
	 * 这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
	 * 另外，每次父组件更新时，子组件的所有 prop 
	 * 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了，Vue 
	 * 会在控制台给出警告。
	 * 通常有两种改变 prop 的情况：
	 * prop 作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用；
	 * prop 作为需要被转变的原始值传入。
	 * 更确切的说这两种情况是：
	 * 定义一个局部 data 属性，并将 prop 的初始值作为局部数据的初始值。
	 * 定义一个 computed 属性，此属性从 prop 的值计算得出。
	 * 注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 
	 * 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
	 */
	Vue.component('child',{
		props : {
			propA : Number,
			propB : [String,Number],
			propC : {
				type : String,
				required : false,
			},
			propD : {
				type : Number,
				default : 1000,
			},
			propE: {
				type: Object,
				default: function () {
					return { message: 'hello' }
				}
			},
			propF: {
				validator: function (value) {
					return value > 10 
				}
			},
			'myMessage' : {
				type : String,
				default : 'ken',
			}
		},
		template : '<span @click="doclick">{{myMessage}}</span>',
		methods : {
			doclick : function(){
				console.log(this.myMessage);
			}
		}
	});
	var vm = new Vue({
		el : "#root",
		data : {
			parentMsg : '',
		}
	});
</script>	
</body>
</html>